import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  // 通用卡片Section
  Widget section({
    required String title,
    required String lotusAsset,
    required List<Widget> items,
    required VoidCallback onMore,
  }) {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
      padding: const EdgeInsets.all(12),
      decoration: BoxDecoration(
        color: const Color(0xFFF8F7F2),
        borderRadius: BorderRadius.circular(16),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              Image.asset(
                lotusAsset,
                width: 24,
                height: 24,
              ),
              const SizedBox(width: 6),
              Text(
                title,
                style: const TextStyle(
                  color: Color(0xFFD13C2F),
                  fontWeight: FontWeight.bold,
                  fontSize: 18,
                ),
              ),
              const Spacer(),
              GestureDetector(
                onTap: onMore,
                child: Row(
                  children: const [
                    Text(
                      '更多',
                      style: TextStyle(
                        color: Color(0xFFF2B800),
                        fontWeight: FontWeight.bold,
                        fontSize: 15,
                      ),
                    ),
                    Icon(Icons.chevron_right, color: Color(0xFFF2B800)),
                  ],
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: items,
          ),
        ],
      ),
    );
  }

  // 听佛说卡片
  Widget listenCard({
    required String title,
    required String subtitle,
    required String imageAsset,
    required VoidCallback onTap,
  }) {
    return Expanded(
      child: GestureDetector(
        onTap: onTap,
        child: Column(
          children: [
            Stack(
              alignment: Alignment.center,
              children: [
                Container(
                  width: 120,
                  height: 80,
                  decoration: BoxDecoration(
                    color: const Color(0xFFD97B4A),
                    borderRadius: BorderRadius.circular(12),
                    border: Border.all(color: const Color(0xFFD97B4A), width: 2),
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(12),
                    child: Image.asset(
                      imageAsset,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                    // ignore: deprecated_member_use
                    color: Colors.white.withOpacity(0.8),
                    shape: BoxShape.circle,
                  ),
                  child: const Icon(Icons.play_arrow, color: Color(0xFFD97B4A), size: 28),
                ),
                Positioned(
                  left: 0,
                  top: 0,
                  bottom: 0,
                  child: Container(
                    width: 36,
                    alignment: Alignment.center,
                    child: RotatedBox(
                      quarterTurns: -1,
                      child: Text(
                        title,
                        style: const TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 18,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
            const SizedBox(height: 8),
            Text(
              subtitle,
              style: const TextStyle(fontSize: 14),
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    );
  }

  // 佛咒/诵经卡片
  Widget bookCard({
    required String title,
    required String subtitle,
    required Color color,
    required VoidCallback onTap,
  }) {
    return Expanded(
      child: GestureDetector(
        onTap: onTap,
        child: Column(
          children: [
            Container(
              width: 90,
              height: 120,
              decoration: BoxDecoration(
                color: color,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Center(
                child: RotatedBox(
                  quarterTurns: -1,
                  child: Text(
                    title,
                    style: const TextStyle(
                      color: Color(0xFFF8F7F2),
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 8),
            Text(
              subtitle,
              style: const TextStyle(fontSize: 14),
              overflow: TextOverflow.ellipsis,
            ),
          ],
        ),
      ),
    );
  }

  // 底部导航栏
  Widget buildBottomBar() {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: 2,
      items: const [
        BottomNavigationBarItem(
          icon: Icon(Icons.spa, color: Color(0xFFD1CFC7)),
          label: '佛',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.help_outline, color: Color(0xFFD1CFC7)),
          label: '解惑',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.local_florist, color: Color(0xFFF2B800)),
          label: '学佛',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.self_improvement, color: Color(0xFFD1CFC7)),
          label: '修佛',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.account_circle, color: Color(0xFFD1CFC7)),
          label: '我的',
        ),
      ],
      selectedItemColor: const Color(0xFFF2B800),
      unselectedItemColor: const Color(0xFFD1CFC7),
      showUnselectedLabels: true,
      onTap: (index) {},
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF8F7F2),
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.only(bottom: 80),
          children: [
            section(
              title: '听佛说',
              lotusAsset: 'assets/images/lotus.png',
              onMore: () {},
              items: [
                listenCard(
                  title: '心经',
                  subtitle: '心经略说',
                  imageAsset: 'assets/images/buddha1.jpg',
                  onTap: () {},
                ),
                const SizedBox(width: 16),
                listenCard(
                  title: '南海普陀',
                  subtitle: '南海普陀山传奇异闻录',
                  imageAsset: 'assets/images/buddha2.jpg',
                  onTap: () {},
                ),
              ],
            ),
            section(
              title: '佛咒',
              lotusAsset: 'assets/images/lotus.png',
              onMore: () {},
              items: [
                bookCard(
                  title: '往生咒',
                  subtitle: '往生咒',
                  color: const Color(0xFF9C6B6B),
                  onTap: () {},
                ),
                const SizedBox(width: 16),
                bookCard(
                  title: '文殊菩萨除淫欲咒',
                  subtitle: '文殊菩萨除淫…',
                  color: const Color(0xFFD6C7A1),
                  onTap: () {},
                ),
                const SizedBox(width: 16),
                bookCard(
                  title: '观音灵感真言(梦授咒)',
                  subtitle: '观音灵感真言',
                  color: const Color(0xFFB7B79B),
                  onTap: () {},
                ),
              ],
            ),
            section(
              title: '诵经',
              lotusAsset: 'assets/images/lotus.png',
              onMore: () {},
              items: [
                bookCard(
                  title: '心经',
                  subtitle: '心经',
                  color: const Color(0xFF353A4B),
                  onTap: () {},
                ),
                const SizedBox(width: 16),
                bookCard(
                  title: '长寿灭罪经',
                  subtitle: '佛说长寿灭罪…',
                  color: const Color(0xFF8B9A7B),
                  onTap: () {},
                ),
                const SizedBox(width: 16),
                bookCard(
                  title: '后出阿弥陀佛偈经',
                  subtitle: '后出阿弥陀佛…',
                  color: const Color(0xFFB5B2C7),
                  onTap: () {},
                ),
              ],
            ),
          ],
        ),
      ),
      bottomNavigationBar: buildBottomBar(),
      floatingActionButton: FloatingActionButton(
        backgroundColor: const Color(0xFFF2B800),
        child: const Icon(Icons.play_arrow, color: Colors.white),
        onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
    );
  }
}